<%--
  Created by IntelliJ IDEA.
  User: Ronchang Wu
  Date: 2021/12/1
  Time: 19:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" href="static/css/normalize.min.css">
    <link rel="stylesheet" href="static/css/login.css">
    <script src="static/js/jquery-3.6.0.min.js" charset="UTF-8"></script>
    <script src="static/layui-master/dist/layui.js" charset="UTF-8"></script>
    <link rel="stylesheet" href="static/layui-master/dist/css/layui.css">
    <script type="text/javascript">
        $(function () {
            $("#loginBtn").click(function () {
                let username = $("#username").val();
                let password = $("#password").val();
                $.ajax({
                    url: "/login",
                    type: "post",
                    data: {
                        username: username,
                        password: password
                    },
                    datatype: "text",
                    success: function (data) {
                        if (data == "success") {
                            window.location.href = '/view/admin/homePage.html';
                        } else {
                            layui.layer.msg('登入失败！请检查用户名或密码！', {
                                icon: 2,
                                time: 1000,
                                anim: 4
                            });
                            $("#username").val("");
                            $("#password").val("");
                            $("#username").focus();
                        }
                    }
                });
            });

            //窗口初始化完成后，第一个文本框获得焦点
            $("#username").focus();

            //发送验证码
            $("#sendVerification").click(function () {
                let username = $("#id").val();
                let email = $("#email").val();
                $.ajax({
                    url: "/verification",
                    type: "post",
                    datatype: "text",
                    data: {
                        email: email,
                        username: username
                    },
                    success: function (data) {
                        if (data == "error") {
                            //弹框发送邮件失败
                            layui.layer.msg("邮件发送失败，请联系管理员处理~", {
                                icon: 0,
                                time: 1000,
                            });
                        }
                    }
                });
                setTime();//启用60s倒计时
            });

            //提交
            $("#submit").click(function () {
                let username = $("#id").val();
                let verification = $("#verification").val();
                $.ajax({
                    url: "/retrievePassword",
                    type: "post",
                    datatype: "text",
                    data: {
                        username: username,
                        verification: verification
                    },
                    success: function (data) {
                        console.log(data);
                        if (data == "success") {
                            layui.layer.msg("重置密码成功~", {
                                icon: 1,
                                time: 1000,
                            }, function () {
                                window.location.reload();
                            });
                        } else if (data == "verificationError") {
                            layui.layer.msg("验证码错误！", {
                                icon: 2,
                                time: 1000,
                            });
                        } else if (data == "expirationTime") {
                            layui.layer.msg("验证码失效，请重新获取~", {
                                icon: 0,
                                time: 1000,
                            });
                        } else if (data == "verificationCodeIsUsed") {
                            layui.layer.msg("验证码已使用，请重新获取~", {
                                icon: 0,
                                time: 1000,
                            });
                        } else {
                            layui.layer.msg("重置密码失败，请检查编号和邮箱是否匹配！", {
                                icon: 2,
                                time: 1000,
                            });
                        }
                    }
                })
            })

            //按钮一分钟倒计时
            var countdown = 60;

            function setTime() {
                let $sendVerification = $("#sendVerification");
                //对电子邮件的验证
                if (countdown == 0) {
                    $sendVerification.removeAttr("disabled");
                    $sendVerification.text("获取验证码");
                    countdown = 60;
                    return;
                } else {
                    $sendVerification.attr("disabled", true);
                    $sendVerification.text("重新发送(" + countdown + ")");
                    countdown--;
                }
                setTimeout(function () {
                    setTime();
                }, 1000)
            }
        })
    </script>
</head>

<body>
<div id="formContainer" class="dwo">
    <div class="formLeft">
        <img src="static/images/avatar.png">
    </div>
    <div class="formRight">
        <!-- 忘记密码 -->
        <form id="forgot" class="otherForm">
            <header>
                <h1>忘记密码</h1>
                <p>输入邮箱找回密码</p>
            </header>
            <section>
                <label>
                    <p>编号</p>
                    <input type="text" placeholder=" " id="id">
                    <div class="border"></div>
                </label>
                <label>
                    <p>邮箱</p>
                    <button type="button" style="position: relative; width: 90px; left: 210px; top: 27px;"
                            id="sendVerification">发送验证码
                    </button>
                    <input type="email" placeholder=" " style="width: 200px;" id="email">
                    <div class="border"></div>
                </label>
                <label>
                    <p>验证码</p>
                    <input type="text" placeholder=" " id="verification">
                    <div class="border"></div>
                </label>
                <button type="button" id="submit">提交</button>
            </section>
            <footer>
                <button type="button" class="forgotBtn">返回</button>
            </footer>
        </form>

        <!-- 登入 -->
        <form id="login" method="post" action="/login" onsubmit="return false;">
            <header>
                <h1>欢迎回来</h1>
                <p>请先登录</p>
            </header>
            <section>
                <label>
                    <p>用户名</p>
                    <input type="text" placeholder=" " name="username" id="username">
                    <div class="border"></div>
                </label>
                <label>
                    <p>密码</p>
                    <input type="password" placeholder=" " name="password" id="password">
                    <div class="border"></div>
                </label>
                <button type="submit" id="loginBtn">登 录</button>
            </section>
            <footer>
                <button type="button" class="forgotBtn">忘记密码？</button>
            </footer>
        </form>

    </div>
</div>
<script src="static/js/script.js"></script>
</body>
</html>